<template>
  <div class="min-h-screen bg-gray-50 p-4 md:p-6 lg:p-8">
    <div class="max-w-4xl mx-auto space-y-6">
      <a-card title="文本加密/解密" :bordered="false">
        <a-form layout="vertical">
          <!-- 加密方式选择 -->
          <a-form-item label="加密方式">
            <a-radio-group v-model:value="encryptionType">
              <a-radio-button value="AES">AES</a-radio-button>
              <a-radio-button value="DES">DES</a-radio-button>
              <a-radio-button value="3DES">3DES</a-radio-button>
            </a-radio-group>
          </a-form-item>

          <!-- 密钥输入 -->
          <a-form-item label="密钥">
            <a-input-password
              v-model:value="key"
              placeholder="请输入密钥"
              :maxLength="32"
            />
          </a-form-item>

          <!-- 输入文本 -->
          <a-form-item label="输入文本">
            <a-textarea
              v-model:value="inputText"
              placeholder="请输入要处理的文本"
              :rows="6"
            />
          </a-form-item>

          <!-- 操作按钮 -->
          <a-form-item>
            <a-space>
              <a-button type="primary" @click="handleEncrypt" :loading="loading">
                加密
              </a-button>
              <a-button @click="handleDecrypt" :loading="loading">
                解密
              </a-button>
              <a-button @click="handleClear">
                清空
              </a-button>
            </a-space>
          </a-form-item>

          <!-- 输出结果 -->
          <a-form-item label="输出结果">
            <a-textarea
              v-model:value="outputText"
              :rows="6"
              readonly
            />
          </a-form-item>

          <!-- 复制按钮 -->
          <a-form-item>
            <a-button
              type="primary"
              @click="handleCopy"
              :disabled="!outputText"
            >
              复制结果
            </a-button>
          </a-form-item>
        </a-form>
      </a-card>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import CryptoJS from 'crypto-js'
import { message } from 'ant-design-vue'

const encryptionType = ref('AES')
const key = ref('')
const inputText = ref('')
const outputText = ref('')
const loading = ref(false)

// AES加密
const encryptAES = (text: string, key: string) => {
  const keyHash = CryptoJS.SHA256(key).toString().slice(0, 32)
  return CryptoJS.AES.encrypt(text, keyHash).toString()
}

// AES解密
const decryptAES = (text: string, key: string) => {
  try {
    const keyHash = CryptoJS.SHA256(key).toString().slice(0, 32)
    const bytes = CryptoJS.AES.decrypt(text, keyHash)
    return bytes.toString(CryptoJS.enc.Utf8)
  } catch (error) {
    throw new Error('解密失败，请检查密钥是否正确')
  }
}

// DES加密
const encryptDES = (text: string, key: string) => {
  const keyHash = CryptoJS.SHA256(key).toString().slice(0, 8)
  return CryptoJS.DES.encrypt(text, keyHash).toString()
}

// DES解密
const decryptDES = (text: string, key: string) => {
  try {
    const keyHash = CryptoJS.SHA256(key).toString().slice(0, 8)
    const bytes = CryptoJS.DES.decrypt(text, keyHash)
    return bytes.toString(CryptoJS.enc.Utf8)
  } catch (error) {
    throw new Error('解密失败，请检查密钥是否正确')
  }
}

// 3DES加密
const encrypt3DES = (text: string, key: string) => {
  const keyHash = CryptoJS.SHA256(key).toString().slice(0, 24)
  return CryptoJS.TripleDES.encrypt(text, keyHash).toString()
}

// 3DES解密
const decrypt3DES = (text: string, key: string) => {
  try {
    const keyHash = CryptoJS.SHA256(key).toString().slice(0, 24)
    const bytes = CryptoJS.TripleDES.decrypt(text, keyHash)
    return bytes.toString(CryptoJS.enc.Utf8)
  } catch (error) {
    throw new Error('解密失败，请检查密钥是否正确')
  }
}

// 处理加密
const handleEncrypt = async () => {
  if (!inputText.value) {
    message.warning('请输入要加密的文本')
    return
  }
  if (!key.value) {
    message.warning('请输入密钥')
    return
  }

  loading.value = true
  try {
    switch (encryptionType.value) {
      case 'AES':
        outputText.value = encryptAES(inputText.value, key.value)
        break
      case 'DES':
        outputText.value = encryptDES(inputText.value, key.value)
        break
      case '3DES':
        outputText.value = encrypt3DES(inputText.value, key.value)
        break
    }
    message.success('加密成功')
  } catch (error) {
    message.error('加密失败：' + (error as Error).message)
  } finally {
    loading.value = false
  }
}

// 处理解密
const handleDecrypt = async () => {
  if (!inputText.value) {
    message.warning('请输入要解密的文本')
    return
  }
  if (!key.value) {
    message.warning('请输入密钥')
    return
  }

  loading.value = true
  try {
    switch (encryptionType.value) {
      case 'AES':
        outputText.value = decryptAES(inputText.value, key.value)
        break
      case 'DES':
        outputText.value = decryptDES(inputText.value, key.value)
        break
      case '3DES':
        outputText.value = decrypt3DES(inputText.value, key.value)
        break
    }
    if (!outputText.value) {
      throw new Error('解密结果为空')
    }
    message.success('解密成功')
  } catch (error) {
    message.error('解密失败：' + (error as Error).message)
  } finally {
    loading.value = false
  }
}

// 清空输入
const handleClear = () => {
  inputText.value = ''
  outputText.value = ''
  key.value = ''
}

// 复制结果
const handleCopy = async () => {
  try {
    await navigator.clipboard.writeText(outputText.value)
    message.success('复制成功')
  } catch (error) {
    message.error('复制失败')
  }
}
</script>

<style scoped>
.ant-card {
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.03);
}
</style> 